<template>
	<div class="citys2">
		<div class="citys2-top common">
			<p>定位/附近城市</p>
			<label >{{cityName}}</label>
		</div>
		<div class="citys2-context common">
			<p>热门城市</p>
			<ul>
				<li v-for="item in hostList" :key="item.code" @click="toHome(item.name)">
					<label :class="{'default':cityName==item.name}">{{item.name}}</label>
				</li>
			</ul>
		</div>
		<div class="citys2-buttom common" v-for="(item,index) in City" :key="index">
			<p>以字母{{item.initial}}开头的城市</p>
			<ul>
				<li v-for="temp in item.list" :key="temp.code"   @click="toHome(temp.name)">
					<label :class="{'default':cityName==temp.name}">{{temp.name}}</label>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import Cookies from 'js-cookie';
	import {mapMutations,mapState} from 'vuex'
	export default{
		name:'Citys2',
		data() {
			return{
				hostList:[],
				City:[],
			}
		},
		//计算属性
		computed:{
			...mapState(['cityName'])
		},
		//组件创建之后
		created() {
			this.axios.get('./api/city.json').then((res)=>{
				let that = this;
				if(res.status===200){
					let data = res.data.data
					this.hostList=data.hotCities
					this.City=data.city
				}
			}).catch((error)=>{
				console.log(error);
			})
		},
		//methods选项，用于存储函数
		methods:{
			toHome(msg){
				this.getcity(msg)
				this.$router.push('/');
			},
			...mapMutations(['getcity'])
		},
	}
</script>

<style scoped>
.citys2 .common .default{
	background-color: #FFDD40 !important;
	color: white !important;
}
.citys2{
	width: 95%;
	margin: 0.3rem auto;
	animation: 1s start;
}
.citys2 .citys2-top{
	font-size: 0.32rem;
	color: #b7b7b7;
	width: 100%;
	margin: 0.2rem 0;
}
.citys2 .citys2-top label{
	font-size: 0.27rem;
	margin: 0.2rem 0;
	margin-left: 0.2rem;
	display: inline-block;
	background-color: #e6e6e6;
	padding: 0.2rem 0.3rem;
	border-radius: 0.2rem;
	color: black
}
.citys2 .citys2-context{
	width: 100%;
	margin: 0 auto;
	font-size: 0.32rem;
	overflow: hidden;
	color: #b7b7b7;
	border-bottom: 1px solid #000000;
	padding-bottom: 0.3rem;
}
.citys2-context ul{
	width: 100%;
}
.citys2-context ul li{
	width: 16%;
	float: left;
	text-align: center;
	margin: 0.2rem 0;
}
.citys2-context ul li label{
	border-radius: 0.2rem;
	font-size: 0.27rem;
	display: inline-block;
	background-color: #e6e6e6;
	width: 1.2rem;
	height: 0.7rem;
	line-height: 0.7rem;
	text-align: center;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	color: black
}
.citys2-buttom{
	width: 100%;
	margin: 0 auto;
	font-size: 0.32rem;
	overflow: hidden;
	color: #b7b7b7;
	border-bottom: 1px solid #000000;
	padding-bottom: 0.3rem;
}
.citys2-buttom p{
	margin-top: 0.2rem;
}
.citys2-buttom ul{
	width: 100%;
}
.citys2-buttom ul li{
	width: 16%;
	float: left;
	text-align: center;
	margin: 0.2rem 0;
}
.citys2-buttom ul li label{
	text-overflow:ellipsis; /* 文本内容溢出之后用省略号代替，和下面两个样式搭配使用 */
	white-space: nowrap;
	overflow: hidden;
	border-radius: 0.2rem;
	font-size: 0.27rem;
	display: inline-block;
	background-color: #e6e6e6;
	width: 1.2rem;
	height: 0.7rem;
	line-height: 0.7rem;
	text-align: center;
	color: black;
}
@keyframes start{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
</style>
